<template>
	<view class="otherOrder">
		<view class="order_head">
			<view class="tabs">
				<scroll-view class="scroll-view_X" scroll-x="true">
					<view class="tab_item" v-for="(item,index) in tabList" :key="index" @click="changeTabs(item)">
						<view class="tab_name">{{item.name}}</view>
						<view class="tab_underline">
							<view :class="{'active_line':tabType==item.val}"></view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="list_head">
				<view class="tips">订单信息可能存在一定的延迟，最迟将于次日12:00前更新</view>
				<view class="type_tabs">
					<view class="tab_item" v-for="item in tabs" :key="item.val" @click="changeOrderBtn(item)">
						<view class="tab_name" :class="{'tab_name_active':orderType==item.val}">{{item.name}}</view>
						<view class="tab_underline">
							<view class="active" v-if="orderType==item.val"></view>
							<view class="" v-else></view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="list" v-if="list.length">
			<view class="order_item" v-for="(item,index) in list" :key="index">
				<view class="order_top">
					<view class="order_shop">
						<image src="https://wx.2024csnl.com/static/mine/shop_icon.png" mode=""></image>
						<view class="shop_name">qian官方旗舰店</view>
						<uni-icons type="forward" size="16" color="#999999"></uni-icons>
					</view>
					<view class="order_status">{{item.order_status_text}}</view>
				</view>
				<view class="order_goods">
					<view class="" v-if="item.goodsList.length<=1">
						<view class="img">
							<image src="https://wx.2024csnl.com/static/home/home-sn.png" mode=""></image>
						</view>
						<view class="goods_info">
							<view class="goods_title">
								爱包图空调变KFR-26GW大1匹变频品圆冷暖
								壁挂式空调 手机
							</view>
							<view class="goods_label">
								银色，智能操作
							</view>
						</view>
					</view>
					<view class="" v-else>
						<view class="img" v-for="(img,i) in item.goodsList.slice(0,3)" :key="i">
							<image src="https://wx.2024csnl.com/static/home/home-sn.png" mode=""></image>
						</view>
						<view class="goods_total">
							<text>共计{{item.goodsList.length}}件商品</text>
							<uni-icons type="forward" size="16" color="#999999"></uni-icons>
						</view>
					</view>
				</view>
				<view class="order_footer">
					<view class="order_total">
						<text>共{{item.goodsTotalCount}}件商品 合计：</text>
						<text class="font_min">¥</text>
						<text class="font_max">8999</text>
						<text class="font_min">.00</text>
						<text>(含运费0.00)</text>
					</view>
					<view class="btn" v-if="item.order_status===1">
						<view class="">取消订单</view>
						<view class="red_btn">付款</view>
					</view>
					<view class="btn" v-else-if="item.order_status===2">
						<view class="" @click.stop="linkTo(item,'applyRefund')">申请退款</view>
						<view class="red_btn">提醒发货</view>
					</view>
					<view class="btn" v-else-if="item.order_status===3">
						<view class="" @click.stop="linkTo(item,'applyRefund')">申请退款</view>
						<view class="red_btn">确认收货</view>
					</view>
					<view class="btn" v-else-if="item.order_status===4">
						<view class="" @click.stop="linkTo(item,'applyRefund')">申请退款</view>
						<view class="red_btn" @click.stop="linkTo(item,'evaluate')">立即评价</view>
					</view>
					<view class="" v-else></view>
				</view>
			</view>
		</view>
		<view class="no_order" v-else>
			<view class="no_order_img">
				<image src="https://wx.2024csnl.com/static/mine/no_order.png" mode=""></image>
			</view>
			<view class="no_order_text">
				这里很空，暂无订单
			</view>
			<view class="no_order_btn">
				<view class="">去逛逛</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					name: '全部',
					val: 0
				}, {
					name: '全部1',
					val: 1
				}, {
					name: '全部2',
					val: 2
				}, {
					name: '全部3',
					val: 3
				}, {
					name: '全部4',
					val: 4
				}, {
					name: '全部5',
					val: 5
				}, {
					name: '全部6',
					val: 6
				}],
				tabType: 0,
				tabs: [{
					name: '待付款',
					val: 1
				}, {
					name: '待发货',
					val: 2
				}, {
					name: '待收货',
					val: 3
				}, {
					name: '待评价',
					val: 4
				}, {
					name: '已完成',
					val: 5
				}],
				orderType: 1,
				list: [{
						id: 1,
						order_status: 1,
						order_status_text: '等待买家付款1',
						goodsList: [{
							title: '商品1'
						}, {
							title: '商品2'
						}],
						goodsTotalCount: 2
					},
					{
						id: 2,
						order_status: 2,
						order_status_text: '待发货',
						goodsList: [{
							title: '爱包图空调变KFR-26GW大1匹变频品圆冷暖壁挂式空调 手机'
						}],
						goodsTotalCount: 1
					}, {
						id: 3,
						order_status: 4,
						order_status_text: '待收货',
						goodsList: [{
							title: '商品1'
						}, {
							title: '商品2'
						}, {
							title: '商品4'
						}, {
							title: '商品5'
						}],
						goodsTotalCount: 4
					},
					{
						id: 2,
						order_status: 2,
						order_status_text: '待发货',
						goodsList: [{
							title: '爱包图空调变KFR-26GW大1匹变频品圆冷暖壁挂式空调 手机'
						}],
						goodsTotalCount: 1
					}, {
						id: 3,
						order_status: 4,
						order_status_text: '待收货',
						goodsList: [{
							title: '商品1'
						}, {
							title: '商品2'
						}, {
							title: '商品4'
						}, {
							title: '商品5'
						}],
						goodsTotalCount: 4
					},
				]
			};
		},
		onLoad() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#41644A'
			})
		},
		methods: {
			changeTabs(item) {
				console.log("dianj", item)
				this.tabType = item.val
			},
			changeOrderBtn(item) {
				this.orderType = item.val
				console.log(item, "ititi")
			},
			linkTo(item, url) {
				uni.navigateTo({
					url: `/package/mine/${url}/${url}?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f5f5f5;
	}

	.otherOrder {
		position: relative;
		height: 100%;
		padding-top: 220upx;

		.order_head {
			width: 100%;
			background-color: #41644A;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;

			.tabs {
				// #ifdef H5
				margin-top: 120rpx; // 新增的,样式不对再调
				// #endif
				height: 80upx;
				overflow: hidden;
				display: flex;
				justify-content: center;
				padding: 0 40upx;
				box-sizing: border-box;

				.scroll-view_X {
					white-space: nowrap;
					height: 100upx;

					.tab_item {
						display: inline-block;
						margin-right: 50upx;

						.tab_name {
							color: #fff;
							margin-bottom: 18upx;
							font-size: 28upx;
							line-height: 28upx;
						}

						.tab_underline {
							display: flex;
							justify-content: center;

							>view {
								width: 40upx;
								height: 4upx;
								border-radius: 2upx;
							}

							.active_line {
								background-color: #fff;
							}
						}
					}
				}
			}

			.list_head {
				width: 100%;
				padding-top: 20upx;
				box-sizing: border-box;
				background-color: #f5f5f5;
				border-radius: 50upx 50upx 0 0;

				.tips {
					text-align: center;
					font-size: 20upx;
					color: #999999;
					line-height: 20upx;
				}

				.type_tabs {
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding: 36upx 30upx 17upx;
					box-sizing: border-box;

					.tab_item {
						.tab_name {
							font-size: 30upx;
							color: #999999;
							line-height: 30upx;
							margin-bottom: 14upx;
						}

						.tab_name_active {
							color: #333333;
						}

						.tab_underline {
							display: flex;
							justify-content: center;

							>view {
								width: 40upx;
								height: 4upx;
								border-radius: 2upx;
							}

							.active {
								background-color: #41644A;
							}
						}
					}
				}
			}
		}


		.list {
			// #ifdef H5
			margin-top: 50rpx; //新增的
			// #endif

			.order_item {
				margin-bottom: 20upx;

				.order_top {
					padding: 26upx 20upx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: #fff;

					.order_shop {
						display: flex;
						align-items: center;

						image {
							width: 32upx;
							height: 32upx;
						}

						.shop_name {
							font-size: 26upx;
							margin: 0 22upx;
						}
					}

					.order_status {
						font-size: 26upx;
						color: #E34749;
					}
				}

				.order_goods {
					>view {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 20upx 20upx 28upx;
						box-sizing: border-box;
						background-color: #FAFAFA;

						.img {
							width: 152upx;
							height: 152upx;
							background-color: #fff;
							margin-right: 20upx;
							display: flex;
							align-items: center;

							image {
								width: 152upx;
								height: 152upx;
							}
						}

						.goods_info {
							flex: 1;

							.goods_title {
								font-size: 26upx;
								color: #333333;
								line-height: 30upx;
								margin-bottom: 24upx;
							}

							.goods_label {
								font-size: 22upx;
								color: #AAAAAA;
							}
						}

						.goods_total {
							flex: 1;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							color: #999999;
							font-size: 24upx;
						}
					}

				}

				.order_footer {
					padding: 0 20upx;
					box-sizing: border-box;
					background-color: #fff;

					.order_total {
						font-size: 22upx;
						padding: 30upx 0 28upx;
						border-bottom: 1upx solid #F2F2F2;
						display: flex;
						justify-content: flex-end;
						align-items: flex-end;

						.font_min {
							font-size: 20upx;
						}

						.font_max {
							font-size: 28upx;
						}
					}

					.btn {
						padding: 24upx 0 30upx;
						display: flex;
						justify-content: flex-end;

						>view {
							width: 152upx;
							height: 52upx;
							border-radius: 26upx;
							border: 1upx solid #CCCCCC;
							line-height: 52upx;
							text-align: center;
							margin-left: 24upx;
							font-size: 26upx;
						}

						.red_btn {
							background-color: #41644A;
							color: #fff;
						}
					}
				}
			}
		}

		.no_order {
			padding-top: 100upx;

			>view {
				display: flex;
				justify-content: center;
			}

			.no_order_img {
				image {
					width: 74upx;
					height: 80upx;
				}
			}

			.no_order_text {
				font-size: 28upx;
				color: #B4B4B4;
				padding: 28upx 0 66upx;
			}

			.no_order_btn {
				>view {
					width: 150upx;
					height: 44upx;
					background-color: #41644A;
					color: #fff;
					border-radius: 22upx;
					line-height: 44upx;
					text-align: center;
					font-size: 26upx;
				}
			}
		}
	}
</style>
